<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>用户表</title>
<link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../css/global.css" media="all">
<link rel="stylesheet"
	href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/table.css" />
</head>

<body>
	<div class="admin-main">

		<blockquote class="layui-elem-quote">
			<a href="javascript:;" class="layui-btn layui-btn-small" id="add">
				<i class="layui-icon">&#xe608;</i> 添加信息
			</a> <a href="javascript:;" class="layui-btn layui-btn-small" id="update">
				<i class="layui-icon">&#xe615;</i> 快速查询
			</a>
		</blockquote>
		<fieldset class="layui-elem-field">
			<legend>数据列表</legend>
			<div class="layui-field-box">
				<form class="layui-form">
					<table class="site-table table-hover">
						<thead>
							<tr>
								<th></th>
								<th>用户ID</th>
								<th>用户名</th>
								<th>部门</th>
								<th>拥有角色</th>
								<th>是否锁定</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="userlist">
						</tbody>
					</table>
				</form>
			</div>
		</fieldset>
		<div class="admin-table-page">
			<div id="page" class="page"></div>
		</div>
	</div>
	<script type="text/javascript" src="../plugins/layui/layui.js"></script>
	<script>
		layui.config({
			base : '../plugins/layui/modules/'
		});
	
		layui.use([ 'form', 'icheck', 'laypage', 'layer' ], function() {
			var $ = layui.jquery,
				form = layui.form(),
				laypage = layui.laypage,
				layer = parent.layer === undefined ? layui.layer : parent.layer;
			$('input').iCheck({
				checkboxClass : 'icheckbox_flat-green'
			});
			//一页的数量
			var count = 8,
				//总页数
				allpages = 5,
				//当前页
				curr;
			var json = {
				"groups" : count
			};
			$.ajax({
				url : '../getCounts',
				type : "POST",
				data : JSON.stringify(json),
				async : false,
				dataType : 'json',
				contentType : 'application/json;charset=utf-8',
				success : function(info) {
					allpages = info.message;
				}
			});
			//page
			laypage({
				cont : 'page',
				pages : allpages, //总页数
				groups : count, //连续显示分页数
				jump : function(obj, first) {
					//得到了当前页，用于向服务端请求对应数据
					curr = obj.curr;
					getAll();
					//实时更新分页数
					this.pages = allpages
				}
			});
			function getAll() {
				json = {
					"message" : curr + "",
					"groups" : count
				};
				$.ajax({
					url : '../allUsers',
					type : "POST",
					data : JSON.stringify(json),
					async : false,
					dataType : 'json',
					contentType : 'application/json;charset=utf-8',
					success : function(info) {
						allpages = info.message;
						setUser(info.user);
					}
				});
			}
	
			//点击添加按钮
			$('#add').on('click', function() {
				$.get('add-user.html', null, function(form) {
					layer.open({
						type : 1,
						title : '添加表单',
						content : form,
						btn : [ '关闭' ],
						area : [ '600px', '400px' ],
						maxmin : true,
						yes : function(index) {
							rebar();
							layer.close(index);
						},
						full : function(elem) {
							var win = window.top === window.self ? window : parent.window;
							$(win).on('resize', function() {
								var $this = $(this);
								elem.width($this.width()).height($this.height()).css({
									top : 0,
									left : 0
								});
								elem.children('div.layui-layer-content').height($this.height() - 95);
							});
						}
					});
				});
			});
	
			//将查询出的数据显示显示在页面上
			function setUser(list) {
				//清空数据
				$('#userlist').html("");
				for (var i in list) {
					var user = list[i];
					var role = user.role;
					var rolename = '[';
					for (var j in role) {
						rolename += role[j].name;
						if (j != role.length - 1) {
							rolename += ',';
						}
					}
					rolename += ']';
					var lock = '';
					if (user.locked == true) {
						lock = '<i class="layui-icon" style="color:red;"></i>'
					} else {
						lock = '<i class="layui-icon" style="color:green;">ဇ</i>'
					}
					var department='';
					if(user.department!=null){
						department=user.department.name;
					}
					$('#userlist').append(
						'<tr>' +
						'<td><input type="checkbox"></td>' +
						'<td>' + user.id + '</td>' +
						'<td>' + user.name + '</td>' +
						'<td>' + department + '</td>' +
						'<td>' + rolename + '</td>' +
						'<td style="text-align:center;">' + lock + '</td>' +
						'<td><a id=' + "e" + user.id + ' href="javascript:" class="layui-btn layui-btn-normal layui-btn-mini">编辑</a>' +
						'<a id=' + user.id + ' href="javascript:;" class="layui-btn layui-btn-danger layui-btn-mini">删除</a></td>' +
						'</tr>'
					);
					editlistener(user.id);
					delelistener(user.id);
				}
			}
			//给编辑按钮添加监听
			function editlistener(id) {
				$.post('edit-user.html', null, function(form) {
				
					$('#e' + id).on('click', function() {
						layer.open({
							type : 1,
							title : '编辑用户',
							content : form,
							btn : [ '关闭' ],
							area : [ '600px', '400px' ],
							maxmin : true,
							success : function(layero, index) {
								var one = layero.find('div#one');
								var two = layero.find('div#two');
								if (one.hasClass('layui-hide') == false) {
									one.addClass('layui-hide');
								}
								if (two.hasClass('layui-hide')) {
									two.removeClass('layui-hide');
								}
								if (two.hasClass('layui-show') == false) {
									two.addClass('layui-show');
								}
								layero.find('div#hidebtn').html(id);
							},
							yes : function(index) {
								rebar();
								layer.close(index);
							},
							full : function(elem) {
								var win = window.top === window.self ? window : parent.window;
								$(win).on('resize', function() {
									var $this = $(this);
									elem.width($this.width()).height($this.height()).css({
										top : 0,
										left : 0
									});
									elem.children('div.layui-layer-content').height($this.height() - 95);
								});
							}
						});
	
					});
				});
			}
	
			//给删除按钮添加监听
			function delelistener(id) {
				$('#' + id).on('click', function() {
					$.ajax({
						url : '../deleteUser/' + id,
						type : "DELETE",
						async : false,
						success : function(info) {
							rebar();
							layer.msg('删除成功');
						}
					});
				});
			}
	
			//刷新并重新构建分页条
			function rebar() {
				laypage({
					cont : 'page',
					curr : curr,
					pages : allpages, //总页数
					groups : count, //连续显示分页数
					jump : function(obj, first) {
						//得到了当前页，用于向服务端请求对应数据
						curr = obj.curr;
						getAll();
						//实时更新分页数
						this.pages = allpages
					}
				});
			}
			//点击更新按钮
			$('#update').on('click', function() {
				$.get('edit-user.html', null, function(form) {
					layer.open({
						type : 1,
						title : '编辑用户',
						content : form,
						btn : [ '关闭' ],
						area : [ '600px', '400px' ],
						maxmin : true,
						yes : function(index) {
							rebar();
							layer.close(index);
						},
						full : function(elem) {
							var win = window.top === window.self ? window : parent.window;
							$(win).on('resize', function() {
								var $this = $(this);
								elem.width($this.width()).height($this.height()).css({
									top : 0,
									left : 0
								});
								elem.children('div.layui-layer-content').height($this.height() - 95);
							});
						}
					});
				});
			});
	
			//多选框
			$('.site-table tbody tr').on('click', function(event) {
				var $this = $(this);
				var $input = $this.children('td').eq(0).find('input');
				$input.on('ifChecked', function(e) {
					$this.css('background-color', '#EEEEEE');
				});
				$input.on('ifUnchecked', function(e) {
					$this.removeAttr('style');
				});
				$input.iCheck('toggle');
			}).find('input').each(function() {
				var $this = $(this);
				$this.on('ifChecked', function(e) {
					$this.parents('tr').css('background-color', '#EEEEEE');
				});
				$this.on('ifUnchecked', function(e) {
					$this.parents('tr').removeAttr('style');
				});
			});
		});
	</script>
</body>

</html>